<template lang="html">
    <div class="login-box">
        <el-row>
            <el-col :offset="8" :span="8" :xs="12">  
                <el-form label-width="80px" v-show="showTab">
                    <el-form-item label="账号：">
                        <el-input v-model="username" placeholder="账号"></el-input>
                    </el-form-item>
                    <el-form-item label="密码：">
                        <el-input v-model="password" type="password" placeholder="密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="login">登录</el-button>
                    </el-form-item>
                </el-form>
                <div v-show="!showTab">
                    <canvas id="canvas"></canvas>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <el-radio-group v-model="tab">
                    <el-radio-button label="账号"></el-radio-button>
                    <el-radio-button label="扫码"></el-radio-button>
                </el-radio-group>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    import QRCode  from 'qrcode';
export default {
    data() {
        return {
            username:'',
            password:'',
            tab:'账号',
            websocket:{}
        }
    },
    methods: {
        login(){
            this.$http.post("/rest/user/login",{username:this.username,password:this.password})
            .then(resp=>{
                if(resp.code == 200){
                    this.$storage.set("uid",resp.result.data.id);
                    this.$storage.set("token",resp.result.data.token);
                    this.$router.push('/index');
                }else{
                    alert(resp.msg);
                }
            })
        },
        showQr(){
            this.sendQrReq();
                
        },
        plaintQr(data){
            QRCode.toCanvas(document.getElementById('canvas'), data,{width:"180"});  
        },
        wsInit(){
            //判断当前浏览器是否支持WebSocket
            if ('WebSocket' in window) {
                // 不带参数的写法
                this.websocket = new WebSocket("ws://127.0.0.1:8081/rest/ws/qrlogin");

                //接收到消息的回调方法
                this.websocket.onmessage = event =>{
                    let msg = {}
                    try{
                        msg = JSON.parse(event.data);
                    }catch(error){
                        console.log(event.data);
                        console.log(error);
                        return;
                    }
                    console.log(msg);
                   switch(msg.cmd){
                    case 'qr_login':{
                        let data = "http://192.168.0.185:8081/rest/user/qrcode?sessionId="+msg.from+"&code="+msg.data;
                        this.plaintQr(data);
                        break;
                    }
                    case 'login_redirect':{
                        let uid = msg.data.uid;
                        let token = msg.data.token;
                        this.$storage.set("uid",uid);
                        this.$storage.set("token",token);
                        this.$router.push("/index");
                        break;
                    }
                    default: {
                            console.log("no");
                    }
                   }
                   
                };
            }
            else {
                this.$message({
                    type:'info',
                    message:'你当前的浏览器不支持WEBSOCKET'
                })
            }
        },
        sendQrReq(){
            this.websocket.send('{"cmd":"qr_login"}')
        }
    },
    mounted() {
        this.wsInit();
    },
    computed:{
        showTab(){
            // console.log(this.tab);
            if(this.tab != "账号"){
                this.showQr();
            }
            return this.tab==="账号";
        }
    }
}
</script>
<style lang="css">
    .login-box{
        margin-top:60px;
        
    }
</style>